<template>
    <div class="warp" style="height:100%;width: 100%;">
            <van-nav-bar fixed :class="showStyle?'header-title-01':'headerBg header-title-01'" >
                <template #left>
                    <router-link tag="a" v-if="showStyle" :class="{'cur' : (mesNum > 0)}" class="header-icon-email"  to="/messageNotification"></router-link>
                    <router-link tag="a" v-else :class="{'white cur' : (mesNum > 0)}" class="header-icon-email white"  to="/messageNotification"></router-link>
                </template>
                <div slot="title">
                    <div class="header-btn-search">
                        <router-link tag="div" to="/search">
                            <span>
                                {{ $t("button_search") }}
                            </span>
                        </router-link>
                    </div>
                </div>
                <a slot="right" :class="showStyle?'header-icon-more':' scoll-top'" @click="getMore()">
                    <ul class="word-btn-list" v-if="moreShow">
                        <!-- 扫描签到 -->
                        <router-link tag="li" to="/barcodeScan">{{ $t("scan_check_in") }}</router-link>
                        <!-- 创建问题 -->
                        <router-link tag="li" to="/addQuestion">{{ $t("create_problem") }}</router-link>
                        <!-- 分享知识 -->
                        <li @click="addKnowledge()">{{ $t("sharing_knowledge") }}</li>
                    </ul>
                </a>
            </van-nav-bar>
            <div class="home-content" @scroll="onScroll">
                <router-view></router-view>
            </div>
        <bottom-navigation :active=0></bottom-navigation>
        <div class="mask-white" v-if="moreShow" @click="hideMore"></div>
        <div class="mask-layer" v-if="popupMask" @click="maskLayer()"></div>
        <div class="popup-box white-bg" v-if="popupLayerCreate">
            <ul class="pic-box-list clearfix">
                <li @click="picBoxLayer('ARTICLE')">
                    <span>
                        <i class="essay-icon"></i>
                    </span>
                    <p>{{ $t("ARTICLE") }}</p><!--文章-->
                </li>
                <li @click="picBoxLayer('FILES')">
                    <span>
                        <i class="doc-icon"></i>
                    </span>
                    <p>{{ $t("upload_files") }}</p><!--上传文档-->
                </li>
            </ul>
        </div>
      <div v-for="(item,index) in medalRemind" :key="index">
      <van-dialog v-model="item.status">
        <div class="remind-wrap">
        <p class="medal-p">{{$t('medal_remind',{'value': item.cnName})}}</p>
          <hr style="margin:0;height:1px;border:0;background-color:#D5D5D5;color:#D5D5D5;"/>
          <div align="center">
        <img class="medal-img" v-if="item.activityGif" :src="item.activityGif" alt="" />
        <img class="medal-img" v-else :src="item.activityImg" alt="" />
          </div>
        <p class="medal-intro">{{item.cnIntro}}</p>
        <p class="medal-p-date">{{item.formatDate}}</p>
        </div>
      </van-dialog>
      </div>

    </div>
</template>

<script>
import {Dialog} from 'vant';
import checkVersion from '@/utils/checkVersion';
export default {
    name: 'home',
    data() {
        return {
            showStyle: false,
            mesNum: 0,
            moreShow: false,
            popupMask: false, //分享知识弹出层
            popupLayerCreate: false, //分享知识弹出层
            medalRemind: [], //勋章提醒
            medalRemindSwitch: false //提醒开关
        };
    },
    directives: {
    },
    components: {
        [Dialog.Component.name]: Dialog.Component
    },
    methods: {
        onScroll() {
            console.log(1233333);
        },
        init() {
            this.moreShow = false;
            this.popupMask = false;
            this.popupLayerCreate = false;
            //消息提醒
            this.$axios({
                method: 'GET',
                url: '/app/api/trainee/home/top/count',
                params: {
                    isMobile: '1'
                }
            }).then((res) => {
                this.mesNum = res.data.unreadWebMessage;
            });
        },
        getMore() {
            this.moreShow = !this.moreShow;
        },
        hideMore() {
            this.moreShow = false;
        },
        addKnowledge() {
            this.moreShow = false;
            this.popupMask = true;
            this.popupLayerCreate = true;
        },
        maskLayer() {
            this.popupMask = false;
            this.popupLayerCreate = false;
        },
        picBoxLayer(type) {
            this.popupMask = false;
            this.popupLayerCreate = false;
            this.$router.push({path: '/addShare', query: {type}});
        },
        /**
         * 获取需要提醒的勋章
         */
        getRemindMedal() {
            this.$axios({
                methods: 'GET',
                url: '/app/medal/personnel/remind/medal'
            }).then(res => {
                let data = res.data;
                for (let i = 0; i < data.length; i++) {
                    data[i].status = true;
                }
                this.medalRemind = data;
                if (res.data) {
                    this.medalRemindSwitch = true;
                }
            });
        },
        handleScroll() {
            let content = document.querySelector('.home-content');
            let scrollTop = content.getBoundingClientRect();
            this.showStyle = scrollTop.top < 0;
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true);
        // 检查版本更新
        checkVersion(this);
        this.getRemindMedal();
        //this.$store.commit('addKeepAliveList', 'home');
        this.init();
    },
    activated() {
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll, true);
    }
};
</script>

<style scoped lang="less">
    /deep/.weui-tab__panel{
         padding-top: 0 !important;
    }
    .header-icon-more {
        position: relative;
    }
    .word-btn-list {
        min-width: 70px;
        padding: 5px 15px;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        top: 56px;
        right: 10px;
        z-index: 100;
        box-shadow: 0 1px 2px #cccccc;
        text-align: center;
        li {
            // padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            font-size: 14px;
            text-wrap: nowrap;
            color: #1a1a1a;
            &:nth-last-child(1) {
                border-bottom: 0;
            }
        }
    }
    .mask-white {
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .remind-wrap{
      margin: 10px;
      .medal-p{
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
      }
      .medal-img{
        width: 50%;
        margin:10px 0;
      }
      .medal-intro{
        font-size: 12px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-bottom: 10px;
      }
      .medal-p-date{
        font-size: 12px;
        text-align: center;
      }
    }
.headerBg{
    background: url('./images/zzc.png') no-repeat 0 0 !important;
    background-size: 100%;
}
.scoll-top{
    width: 46px;
    height: 56px;
    display: flex;
    align-items: center;
}
.scoll-top::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 11px;
    background: url('./images/rightlist.png') no-repeat 0 0;
    background-size: contain;
}
</style>
